<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getUserInfo } from "@/utils/userInfo.ts";
import type { UserVo } from "@/type";
import { errorImg } from "@/assets/errorImg.ts";
import type { TagVo } from "@/type/post.ts";

const user = ref<UserVo>();
const getUser = async () => {
  try {
    user.value = await getUserInfo<UserVo>();
  } catch (error) {
    console.error("Failed to fetch user:", error);
  }
};

onMounted(() => {
  getUser();
});
</script>

<template>
  <div class="bg-white rounded-lg shadow-sm p-6">
    <div class="flex flex-col items-center">
      <a-avatar :size="{ xs: 80, sm: 80, md: 80, lg: 80, xl: 80, xxl: 100 }">
        <template #icon>
          <a-image :src="user?.avatar" alt="作者头像" :fallback="errorImg" />
        </template>
      </a-avatar>
      <h3 class="text-lg font-bold mb-2">{{ user?.displayName }}</h3>
      <p class="text-gray-600 text-center mb-4">
        终身学习者，热爱技术与写作，记录生活点滴
      </p>
      <div class="flex space-x-4">
        <a-tooltip
          v-for="social in user?.contactJson"
          :key="social.icon"
          :title="social.name"
        >
          <a :href="social.key" target="_blank">
            <component
              :is="$antIcons[social.icon]"
              class="text-xl cursor-pointer hover:text-blue-600"
            />
          </a>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
